<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商店进销存管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-all duration-200;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .card-shadow {
                @apply shadow-md hover:shadow-lg transition-shadow duration-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-cubes text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-gray-800">商店进销存管理系统</h1>
        </div>

        <div class="flex items-center space-x-6">
            <div class="relative">
                <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="flex items-center space-x-4">
                <button class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-bell-o text-xl"></i>
                </button>
                <button class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-cog text-xl"></i>
                </button>
                <div class="flex items-center space-x-2 cursor-pointer">
                    <img src="https://picsum.photos/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                    <span class="text-gray-700">管理员</span>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="flex flex-1 overflow-hidden">
    <!-- 侧边栏导航 -->
    <aside class="w-64 bg-white shadow-md h-[calc(100vh-64px)] overflow-y-auto transition-all duration-300">
        <nav class="py-4">
            <div class="px-4 mb-4">
                <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">主菜单</h2>
            </div>

            <a href="index.html" class="sidebar-item active" data-path="index.html">
                <i class="fa fa-tachometer w-5 h-5 mr-3"></i>
                <span>仪表盘</span>
            </a>

            <div class="px-4 mt-6 mb-2">
                <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">基础信息</h2>
            </div>

            <a href="/templates/products/list.html" class="sidebar-item" data-path="/templates/products/list.html">
                <i class="fa fa-shopping-bag w-5 h-5 mr-3"></i>
                <span>商品管理</span>
            </a>

            <a href="/templates/categories/list.html" class="sidebar-item" data-path="/templates/categories/list.html">
                <i class="fa fa-th-large w-5 h-5 mr-3"></i>
                <span>类别管理</span>
            </a>

            <a href="templates/suppliers/list.html" class="sidebar-item">
                <i class="fa fa-truck w-5 h-5 mr-3"></i>
                <span>供应商管理</span>
            </a>

            <a href="templates/customers/list.html" class="sidebar-item">
                <i class="fa fa-users w-5 h-5 mr-3"></i>
                <span>客户管理</span>
            </a>

            <div class="px-4 mt-6 mb-2">
                <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">库存管理</h2>
            </div>

            <a href="templates/inventory/warehouse.html" class="sidebar-item">
                <i class="fa fa-archive w-5 h-5 mr-3"></i>
                <span>仓库管理</span>
            </a>

            <a href="templates/inventory/stock.html" class="sidebar-item">
                <i class="fa fa-list-alt w-5 h-5 mr-3"></i>
                <span>库存查询</span>
            </a>

            <a href="templates/inventory/instock.html" class="sidebar-item">
                <i class="fa fa-sign-in w-5 h-5 mr-3"></i>
                <span>入库管理</span>
            </a>

            <a href="templates/inventory/outstock.html" class="sidebar-item">
                <i class="fa fa-sign-out w-5 h-5 mr-3"></i>
                <span>出库管理</span>
            </a>

            <a href="templates/inventory/transfer.html" class="sidebar-item">
                <i class="fa fa-exchange w-5 h-5 mr-3"></i>
                <span>转仓管理</span>
            </a>

            <div class="px-4 mt-6 mb-2">
                <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">统计分析</h2>
            </div>

            <a href="templates/statistics/sales.html" class="sidebar-item">
                <i class="fa fa-line-chart w-5 h-5 mr-3"></i>
                <span>销售统计</span>
            </a>

            <a href="templates/statistics/inventory.html" class="sidebar-item">
                <i class="fa fa-pie-chart w-5 h-5 mr-3"></i>
                <span>库存分析</span>
            </a>

            <div class="px-4 mt-6 mb-2">
                <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">系统设置</h2>
            </div>

            <a href="templates/system/users.html" class="sidebar-item">
                <i class="fa fa-user-circle w-5 h-5 mr-3"></i>
                <span>用户管理</span>
            </a>

            <a href="templates/system/roles.html" class="sidebar-item">
                <i class="fa fa-shield w-5 h-5 mr-3"></i>
                <span>角色权限</span>
            </a>

            <a href="templates/system/logs.html" class="sidebar-item">
                <i class="fa fa-history w-5 h-5 mr-3"></i>
                <span>操作日志</span>
            </a>
        </nav>
    </aside>

    <!-- 主内容区域 -->
    <main class="flex-1 overflow-y-auto bg-gray-50 p-6">
        <div class="container mx-auto">
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">仪表盘</h2>
                <p class="text-gray-500 mt-1">欢迎使用商店进销存管理系统，今天是 <span id="current-date"></span></p>
            </div>

            <!-- 统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">今日销售额</p>
                            <h3 class="text-3xl font-bold mt-1 text-gray-800">¥28,543</h3>
                            <p class="text-success flex items-center mt-2 text-sm">
                                <i class="fa fa-arrow-up mr-1"></i> 12.5% <span class="text-gray-500 ml-1">较昨日</span>
                            </p>
                        </div>
                        <div class="p-4 bg-blue-100 rounded-lg">
                            <i class="fa fa-money text-primary text-2xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">今日订单数</p>
                            <h3 class="text-3xl font-bold mt-1 text-gray-800">186</h3>
                            <p class="text-success flex items-center mt-2 text-sm">
                                <i class="fa fa-arrow-up mr-1"></i> 8.2% <span class="text-gray-500 ml-1">较昨日</span>
                            </p>
                        </div>
                        <div class="p-4 bg-green-100 rounded-lg">
                            <i class="fa fa-shopping-cart text-success text-2xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">库存总量</p>
                            <h3 class="text-3xl font-bold mt-1 text-gray-800">25,841</h3>
                            <p class="text-danger flex items-center mt-2 text-sm">
                                <i class="fa fa-arrow-down mr-1"></i> 3.1% <span class="text-gray-500 ml-1">较昨日</span>
                            </p>
                        </div>
                        <div class="p-4 bg-purple-100 rounded-lg">
                            <i class="fa fa-cubes text-purple-500 text-2xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">库存预警</p>
                            <h3 class="text-3xl font-bold mt-1 text-gray-800">12</h3>
                            <p class="text-warning flex items-center mt-2 text-sm">
                                <i class="fa fa-arrow-up mr-1"></i> 2 项 <span class="text-gray-500 ml-1">较昨日</span>
                            </p>
                        </div>
                        <div class="p-4 bg-yellow-100 rounded-lg">
                            <i class="fa fa-exclamation-triangle text-warning text-2xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="font-semibold text-gray-800">销售趋势</h3>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm bg-primary text-white rounded-md">周</button>
                            <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md">月</button>
                            <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md">年</button>
                        </div>
                    </div>
                    <div class="h-80">
                        <canvas id="salesChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="font-semibold text-gray-800">库存状态</h3>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm bg-primary text-white rounded-md">全部</button>
                            <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md">预警</button>
                        </div>
                    </div>
                    <div class="h-80">
                        <canvas id="inventoryChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 最近操作和库存预警 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="font-semibold text-gray-800">最近操作</h3>
                        <button class="text-primary text-sm">查看全部</button>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                            <tr class="border-b border-gray-200">
                                <th class="py-3 text-left text-sm font-medium text-gray-500">操作类型</th>
                                <th class="py-3 text-left text-sm font-medium text-gray-500">商品名称</th>
                                <th class="py-3 text-left text-sm font-medium text-gray-500">数量</th>
                                <th class="py-3 text-left text-sm font-medium text-gray-500">操作人</th>
                                <th class="py-3 text-left text-sm font-medium text-gray-500">时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 text-sm text-gray-600"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">入库</span></td>
                                <td class="py-3 text-sm text-gray-600">华为 Mate 50 Pro</td>
                                <td class="py-3 text-sm text-gray-600">50</td>
                                <td class="py-3 text-sm text-gray-600">张三</td>
                                <td class="py-3 text-sm text-gray-500">10分钟前</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 text-sm text-gray-600"><span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">出库</span></td>
                                <td class="py-3 text-sm text-gray-600">小米 13</td>
                                <td class="py-3 text-sm text-gray-600">25</td>
                                <td class="py-3 text-sm text-gray-600">李四</td>
                                <td class="py-3 text-sm text-gray-500">25分钟前</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 text-sm text-gray-600"><span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">转仓</span></td>
                                <td class="py-3 text-sm text-gray-600">苹果 iPhone 14</td>
                                <td class="py-3 text-sm text-gray-600">30</td>
                                <td class="py-3 text-sm text-gray-600">王五</td>
                                <td class="py-3 text-sm text-gray-500">1小时前</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 text-sm text-gray-600"><span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs">退货</span></td>
                                <td class="py-3 text-sm text-gray-600">三星 Galaxy S23</td>
                                <td class="py-3 text-sm text-gray-600">5</td>
                                <td class="py-3 text-sm text-gray-600">赵六</td>
                                <td class="py-3 text-sm text-gray-500">2小时前</td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="py-3 text-sm text-gray-600"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">入库</span></td>
                                <td class="py-3 text-sm text-gray-600">OPPO Find X6</td>
                                <td class="py-3 text-sm text-gray-600">40</td>
                                <td class="py-3 text-sm text-gray-600">张三</td>
                                <td class="py-3 text-sm text-gray-500">3小时前</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="font-semibold text-gray-800">库存预警</h3>
                        <button class="text-primary text-sm">查看全部</button>
                    </div>
                    <div class="space-y-4">
                        <div class="p-4 border-l-4 border-danger bg-red-50 rounded">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h4 class="font-medium text-gray-800">小米手环 7</h4>
                                    <p class="text-sm text-gray-600 mt-1">当前库存: 5 <span class="text-danger ml-2">安全库存: 50</span></p>
                                </div>
                                <div class="bg-danger text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">
                                    紧急
                                </div>
                            </div>
                            <div class="mt-3 flex justify-between items-center">
                                <span class="text-xs text-gray-500">最后更新: 今天 09:30</span>
                                <button class="text-xs text-primary">补货</button>
                            </div>
                        </div>

                        <div class="p-4 border-l-4 border-warning bg-yellow-50 rounded">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h4 class="font-medium text-gray-800">华为 FreeBuds Pro</h4>
                                    <p class="text-sm text-gray-600 mt-1">当前库存: 12 <span class="text-warning ml-2">安全库存: 20</span></p>
                                </div>
                                <div class="bg-warning text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">
                                    警告
                                </div>
                            </div>
                            <div class="mt-3 flex justify-between items-center">
                                <span class="text-xs text-gray-500">最后更新: 昨天 14:15</span>
                                <button class="text-xs text-primary">补货</button>
                            </div>
                        </div>

                        <div class="p-4 border-l-4 border-warning bg-yellow-50 rounded">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h4 class="font-medium text-gray-800">苹果 AirPods Max</h4>
                                    <p class="text-sm text-gray-600 mt-1">当前库存: 8 <span class="text-warning ml-2">安全库存: 15</span></p>
                                </div>
                                <div class="bg-warning text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">
                                    警告
                                </div>
                            </div>
                            <div class="mt-3 flex justify-between items-center">
                                <span class="text-xs text-gray-500">最后更新: 昨天 16:40</span>
                                <button class="text-xs text-primary">补货</button>
                            </div>
                        </div>

                        <div class="p-4 border-l-4 border-warning bg-yellow-50 rounded">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h4 class="font-medium text-gray-800">大疆 Mini 3 Pro</h4>
                                    <p class="text-sm text-gray-600 mt-1">当前库存: 7 <span class="text-warning ml-2">安全库存: 10</span></p>
                                </div>
                                <div class="bg-warning text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">
                                    警告
                                </div>
                            </div>
                            <div class="mt-3 flex justify-between items-center">
                                <span class="text-xs text-gray-500">最后更新: 2天前</span>
                                <button class="text-xs text-primary">补货</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- 页脚 -->
<footer class="bg-white py-4 border-t border-gray-200">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        <p>© 2025 商店进销存管理系统 - 版权所有</p>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 设置当前日期
    const setCurrentDate = () => {
        const now = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
    };

    // 初始化销售图表
    const initSalesChart = () => {
        const ctx = document.getElementById('salesChart').getContext('2d');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [
                    {
                        label: '销售额',
                        data: [15000, 12000, 18000, 16000, 22000, 25000, 28000],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '销售量',
                        data: [80, 65, 95, 85, 110, 130, 140],
                        borderColor: '#0FC6C2',
                        backgroundColor: 'rgba(15, 198, 194, 0.1)',
                        tension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    };

    // 初始化库存图表
    const initInventoryChart = () => {
        const ctx = document.getElementById('inventoryChart').getContext('2d');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['充足', '低库存', '缺货', '待补货'],
                datasets: [
                    {
                        label: '商品数量',
                        data: [156, 28, 12, 35],
                        backgroundColor: [
                            '#00B42A',
                            '#FF7D00',
                            '#F53F3F',
                            '#165DFF'
                        ]
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    };

    // 侧边栏切换（保持原有功能）
    const toggleSidebar = () => {
        const sidebar = document.querySelector('aside');
        sidebar.classList.toggle('w-64');
        sidebar.classList.toggle('w-20');

        const sidebarTexts = document.querySelectorAll('aside span');
        sidebarTexts.forEach(text => {
            text.classList.toggle('hidden');
        });
    };

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', () => {
        setCurrentDate();
        initSalesChart();
        initInventoryChart();
        initSidebarNavigation();
        setCurrentPageActive();
    });

    /**
     * 初始化侧边栏导航
     */
    const initSidebarNavigation = () => {
        const sidebarItems = document.querySelectorAll('.sidebar-item');

        sidebarItems.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();

                const path = item.getAttribute('data-path');
                if (!path) return;

                // 更新激活状态
                updateActiveItem(item);

                // 显示加载指示器
                showPageLoader();

                // 使用平滑过渡加载新页面
                setTimeout(() => {
                    window.location.href = path;
                }, 300); // 动画持续时间
            });
        });
    };

    /**
     * 更新激活菜单项
     */
    const updateActiveItem = (activeItem) => {
        document.querySelectorAll('.sidebar-item').forEach(item => {
            item.classList.remove('active');
        });
        activeItem.classList.add('active');
    };

    /**
     * 设置当前页面菜单项为激活状态
     */
    const setCurrentPageActive = () => {
        const currentPath = window.location.pathname;
        const sidebarItems = document.querySelectorAll('.sidebar-item');

        sidebarItems.forEach(item => {
            const itemPath = item.getAttribute('data-path');
            if (itemPath && currentPath.endsWith(itemPath)) {
                updateActiveItem(item);
                return;
            }
        });
    };

    /**
     * 显示页面加载指示器
     */
    const showPageLoader = () => {
        const mainContent = document.querySelector('main');

        // 创建加载指示器元素
        const loader = document.createElement('div');
        loader.className = 'fixed inset-0 bg-white bg-opacity-80 flex items-center justify-center z-50 transition-opacity duration-300';
        loader.innerHTML = `
        <div class="text-center">
            <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
            <p class="mt-4 text-gray-600">加载中...</p>
        </div>
    `;

        // 添加到页面
        document.body.appendChild(loader);

        // 300ms后移除（与导航延迟匹配）
        setTimeout(() => {
            loader.classList.add('opacity-0');
            setTimeout(() => {
                document.body.removeChild(loader);
            }, 300);
        }, 300);
    };
</script>
</body>
</html>